@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}
section{
    position: absolute;
    top: vw(76);
    bottom: vw(47);
    .star-xing{
        width: 100%;
        height: vw(76);
        p{
            margin-left: vw(266);
            margin-top: vw(44);
            font-size: vw(20);
        }
    }
    .star-button{
        width: 100%;
        height: vw(100);
        input[type="button"]{
            margin-left: vw(219);
            margin-top: vw(20);
            width: vw(100);
            height: vw(29);
            font-size: vw(16);
            color: white;
            background: #a6a6a6;
            border: 1px solid #333333;
            border-radius: vw(8) 0 0 vw(8);
        }
        input[type="button"]:nth-child(2){
         background: white;
         color: #a6a6a6; 
         margin-left: vw(-10);
         border-radius: 0 vw(8) vw(8) 0; 
         border: 1px solid #d0d0d0; 
        }
        input[type="button"]:hover{
            color: white;
            border-color: #000000;
            background: #333333;
        }
    }
    .star-banan{
        width: 100%;
//      height: vw(763);
        margin-bottom: vw(45);
        .star-banan-show{
            width: vw(463);
            height: vw(647);
            margin: 0 auto;
            border-radius: vw(30) vw(30) vw(8) vw(8);
            .star-banan1{
                width: vw(463);
                height: vw(647);
                .container{
                    width: 100%;
                    height: 100%;
                }
                .align {
                    clear: both;
                    width: 100%;
                    height: 100%;
                    position: relative;
                    >li{
                        position: absolute;
                        width: vw(463);
                        height: vw(647);
                        display: inline-block;
                    }
                }
                
                
                .book {
                    position: relative;
                    margin: 0;
                    width: 100%; 
                    height: 100%;
                    -webkit-perspective: 1000px;
                    -moz-perspective: 1000px;
                    perspective: 1000px;
                    -webkit-transform-style: preserve-3d;
                    -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                    transition: 0.3s;
                }
                .bookk{
                    transform: translateX(vw(80));
                    transition-delay: 0.3s;
                }
                .paperback_back {
                    color: #FFFFFF;
                    font-size: vw(30);
                    background-color: #333;
                }
                .paperback_front,
                .paperback_back,
                .paperback_front li,
                .paperback_back li {
                    border-radius: 2px 8px 8px 2px;
                    position: absolute;
                    top: 0;
                    left: 0px;
                    width: 100%;
                    height: 100%;
                    -webkit-transform-style: preserve-3d;
                    -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                
                .paperback_front,
                .paperback_back {
                    -webkit-transform-origin: 0% 100%;
                    -moz-transform-origin: 0% 100%;
                    transform-origin: 0% 100%;
                }
                
                .paperback_front{
                    -webkit-transition: all 0.5s ease, z-index 0.6s;
                    -moz-transition: all 0.5s ease, z-index 0.6s;
                    transition: all 0.5s ease, z-index 0.6s;
                }
                
                .paperback_front li img,
                .paperback_back li img {
                    width: 100%;
                    height: 100%;
                    border-radius: 2px 8px 8px 2px;
                    position: absolute;
                    top: 0;
                    left: 0;
                }
                
                /* Ruled paper */
                
                .ruled_paper,
                .ruled_paper > li {
                    position: absolute;
                    -webkit-transform-style: preserve-3d;
                    -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
                }
                
                .ruled_paper {
                    width: 98%;
                    height: 98%;
                    top: 1%;
                    left: 1%;
                    z-index: 10;
                }
                
                .ruled_paper > li {
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                
                .ruled_paper > li {
                    -webkit-transform-origin: left center;
                    -moz-transform-origin: left center;
                    transform-origin: left center;
                    -webkit-transition-property: transform;
                    -moz-transition-property: transform;
                    transition-property: transform;
                    -webkit-transition-timing-function: ease;
                    -moz-transition-timing-function: ease;
                    transition-timing-function: ease;
                }
                
                @keyframes paperback_front{
                    from{transform: rotateY(-180deg) translateZ(0px);z-index: 0;}
                    to{transform: rotateY(-6deg) translateZ(0px);
                    z-index: 100;}
                }
                .paperback_front {
                    animation: paperback_front 0.5s forwards;
                }
                
                .paperback_back {
                    transform: rotateY(0);
                }
                
                @keyframes ruled_paper-item1n{
                    from{transform: rotateY(-178deg);}
                    to{transform: rotateY(-5deg);}
                }
                .ruled_paper-item1n {
                    animation: ruled_paper-item1n 0.5s forwards;
                }
                
                @keyframes ruled_paper-item2n{
                    from{transform: rotateY(-176deg);}
                    to{transform: rotateY(-4deg);}
                }
                .ruled_paper-item2n {
                    animation: ruled_paper-item2n 0.5s forwards;
                }
                
                @keyframes ruled_paper-item3n{
                    from{transform: rotateY(-174deg);}
                    to{transform: rotateY(-3deg);}
                }
                .ruled_paper-item3n {
                    animation: ruled_paper-item3n 0.5s forwards;
                }
                
                @keyframes ruled_paper-item4n{
                    from{transform: rotateY(-172deg);}
                    to{transform: rotateY(-2deg);}
                }
                .ruled_paper-item4n {
                    animation: ruled_paper-item4n 0.5s forwards;
                }
                
                @keyframes ruled_paper-item5n{
                    from{transform: rotateY(-170deg);}
                    to{transform: rotateY(-1deg);}
                }
                .ruled_paper-item5n {
                    animation: ruled_paper-item5n 0.5s forwards;
                }
                
                
                @keyframes paperback_frontt{
                    from{transform: rotateY(-6deg) translateZ(0px);z-index: 100;}
                    to{transform: rotateY(-180deg) translateZ(0px);z-index: 0;}
                }
                .paperback_frontt {
                    animation: paperback_frontt 1s forwards;
                }
                
                
                @keyframes ruled_paper-item1{
                    from{transform: rotateY(-5deg);}
                    to{transform: rotateY(-178deg);}
                }
                .ruled_paper-item1 {
                    animation: ruled_paper-item1 1s forwards;
                    transition: 1s;
                }
                
                @keyframes ruled_paper-item2{
                    from{transform: rotateY(-4deg);}
                    to{transform: rotateY(-176deg);}
                }
                .ruled_paper-item2 {
                    animation: ruled_paper-item2 1s forwards;
                    transition: 1s;
                }
                
                @keyframes ruled_paper-item3{
                    from{transform: rotateY(-3deg);}
                    to{transform: rotateY(-174deg);}
                }
                .ruled_paper-item3 {
                    animation: ruled_paper-item3 1s forwards;
                    transition: 1s;
                }
                
                @keyframes ruled_paper-item4{
                    from{transform: rotateY(-2deg);}
                    to{transform: rotateY(-172deg);}
                }
                .ruled_paper-item4 {
                    animation: ruled_paper-item4 1s forwards;
                    transition: 1s;
                }
                
                @keyframes ruled_paper-item5{
                    from{transform: rotateY(-1deg);}
                    to{transform: rotateY(-170deg);}
                }
                .ruled_paper-item5 {
                    animation: ruled_paper-item5 1s forwards;
                    transition: 1s;
                }
                
            }
        }
        input[type="button"]{
            width: vw(236);
            height: vw(45);
            border:none ;
            border: 1px solid #d0d0d0;
            border-radius: vw(8);
            background: white;
            font-size: vw(20);
            margin-left: vw(206);
            margin-top: vw(90);
        }
    }
    li{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: vw(80);
        text-align: center;
        line-height: vw(80);
        font-size: vw(26);
        list-style: none;
        border: 1px solid #ededed;
    }
    li:last-child{
        border: none;
        color: #7f7f7f;
    }
}
footer{
    position: absolute;
    bottom: 0;
}
